﻿html, body {
    height:100%;
    width:100%;
}

.layui-fluid {
    background-color: rgb(248, 248, 248);
    padding: 15px;
    height:100%;
    width:100%;
    box-sizing:border-box;
}

/*卡片头*/
.layui-card-header {
    background-color: #eaeef9;
    font-size: 18px;
    font-weight: 600;
}

.layui-form-label {
    /*width:120px !important;*/
}

/*当前页面布局开始*/

.easy-layout {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: 5px;
    /*background-color: #fff;*/
}

.easy-layout-left-center {
    padding-left: 550px;
}

.easy-layout-center-right {
    padding-right: 550px;
}


.easy-layout-left {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0px 10px 10px;
    width: 550px;
    height: 100%;
    box-sizing: border-box;
    display: none;
}

.easy-layout-right {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 0px 10px 10px;
    width: 550px;
    height: 100%;
    box-sizing: border-box;
    display: none;
}

.easy-layout-center-right .easy-layout-right {
    display: block;
}


    .easy-layout-left-center .easy-layout-left {
        display: block;
    }

.easy-layout-center {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box; 
}

/*当前页面布局结束*/


/*自定义卡片*/
.easy-card {
    margin-bottom: 15px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    display:flex;
    flex-direction:column;
    height:100%;
    box-sizing:border-box;
}

.easy-card:last-child {
    margin-bottom: 0;
}


.easy-card-header {
    border-bottom: 1px solid #f8f8f8;
    color: #333;
    border-radius: 2px 2px 0 0;
    background-color: #eaeef9;
    font-size: 18px;
    font-weight: 600;
    /* position: relative; */
    padding: 10px 15px;
}

.easy-card-body, .easy-card-header {
    /* position: relative; */
    padding: 10px 15px;
}

.easy-card-body {
    height:1px;
    flex:1;
}
    /*自定义卡片*/
    /*隐藏元素*/
    .student-hide, .seat-hide {
        display: none;
    }



/*学生列表*/
.student-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: #19191A;
}


.student {
    padding: 5px 5px;
    box-sizing: border-box;
    box-sizing:border-box;
    cursor:pointer;

}

.student-card {
    position: relative;
    box-sizing: border-box;
    height: 50px;
    width: 100px;   
    padding-bottom: 10px;
    box-sizing: border-box;
    background: #f8f9fa;
    transition: all 0.3s ease;
    border-radius:4px;
}

    .student-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-3px);
    }

/*男性*/
.male .student-card {
    background: rgba(137, 207, 240, 0.2);
    border-left: 4px solid #89CFF0;
    color: #19191A;
}
/*女性*/
.female .student-card {
    background: rgba(255, 154, 162, 0.2);
    border-left: 4px solid #FF9AA2;
}

.student-card-body {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    flex-direction:row;
    align-items:center;
}

.student-card-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 15px;
    height: 15px;
    display: flex;
    flex-direction: row;
    color: #fff;
    font-size: 10px;
    padding: 0px 5px;
    box-sizing: border-box;
    color: rgb(149, 165, 166);
}

    .student-card-footer .student-sex {
    }

    .student-card-footer .student-height {
        flex:1;
     
    }


/*座位表*/
.seating-chart-container {
    position:relative;
    /*padding-top:30px;*/
    box-sizing:border-box;
    
}


.seating-chart {
    height: 700px;
    border: 1px solid #16baaa;
    position: relative;
    padding-top: 50px;   
    padding-bottom:30px;
    border-radius: 3px;
}

/*讲台*/

.teacher-podium-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.teacher-podium {
    text-align: center;
    background-color: #16baaa !important;
    background-color: #16baaa;
    color: #fff !important;
    font-size: 20px;
    font-weight: 500;
    border-radius: 3px;
    padding: 0px 30px;
    border: 1px solid #16baaa;
    border-top: none;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    min-width:150px;
    box-sizing:border-box;
}

/*注意事项*/
.seating-chart-label-container {
    position: absolute;
    bottom:0;
    left: 0;
    height: 30px;
    line-height: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.seating-chart-label {
    padding: 0px 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 25px;
    line-height: 30px;
    font-size: 14px;
}

.seating-chart-label-flag {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
}

.male .seating-chart-label-flag {
    background: rgba(255, 154, 162, 0.2);
    border: 1px solid #FF9AA2;
}

.female .seating-chart-label-flag {
    background: rgba(137, 207, 240, 0.2);
    border: 1px solid #89CFF0;
}

.empty .seating-chart-label-flag {
    background: #fff;
    border: 1px solid #c2c2c2;
}



.seating-chart-label-title {
    display: block;
    padding-left:10px;
}
/*座位表容器*/
.seat-container {
    padding-top: 20px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/*座位表列*/
.seat-col {
    display: flex;
    flex-direction: column;
}

/*座位*/
.seat {
    width: 120px;
    padding: 2px 4px;
   position:relative;
}

.seat-card {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border: 3px dotted #c2c2c2;
    user-select:none;
}

.seat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-3px);
   cursor:pointer;
}

/*男性*/
.male .seat-card {
    background: rgba(137, 207, 240, 0.2); 
    border: 3px solid #89CFF0;
}
/*女性*/
.female .seat-card {
    background: rgba(255, 154, 162, 0.2);
    border: 3px solid #FF9AA2;
}

.seat-card-header {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    padding: 0px 5px;
    box-sizing: border-box;
    line-height: 20px;
    color: rgb(149, 165, 166);
}

.seat-number {
    text-align: left;
    flex:1;
}

.seat-locked-state {
    /*position: absolute;*/
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;   
}

    .seat-locked-state .layui-icon {
        font-size: 18px;
 
    }

    .seat-locked-state .layui-icon-lock {
        color: #16baaa;
    }

    .seat-locked-state .layui-icon-disabled {
        color: #ff5722;
        display:none;
    }



.seat-locked .seat-locked-state .layui-icon-lock {
    display: none;
}

.seat-locked .seat-locked-state .layui-icon-disabled {
    display: block;
}

.seat-card-body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.seat-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    font-size: 12px;
    line-height: 20px;
    padding: 0px 5px;
    box-sizing: border-box;
    color: rgb(149, 165, 166);
}

.student-sex {
    text-align: left;
}

.student-height {
    flex: 1;
    text-align: right;
}

/*拖拽效果*/
.dragging {
    opacity:0.4 ;
}